<template>
    <!--<div id="pullrefresh" >-->
    <scroller :on-refresh="refresh"  :on-infinite="infinite" ref="my_scroller">
    <div class="goods-list">
        <div class="goods-item" v-for="(value,index) in goodslist" :key="index" @click="goDetail(value.id)">
            <img :src="value.src" alt="">
            <h1 class="title">{{value.title}}</h1>
            <div class="info">
                 <p class="price">
                     <span class="now">{{value.price_now}}</span>
                     <span class="old">原价{{value.price_old}}</span>
                 </p>
                 <p class="sell">
                     <span>热卖中</span>
                     <span>剩{{value.max}}件</span>
                 </p>
            </div>
        </div>
        <span class="bottom" v-show="more">上滑加载更多...</span>
        <span class="bottom" v-show='!more'>到底了...</span>
    </div>
    </scroller>

    <!--</div>-->
</template>

<script>
    //问题1.刚进入页面无法上下滑动，mui-init（有dom操作，放入mounted）---未解决
    //问题2.使用vue-scroller上拉  数据连续刷新两次
    // import mui from '../../lib/mui/js/mui.min.js'

    //启用双击监听
    export default {
        name: "goods-list",
        data(){
            return{
                goodslist:[],
                nowLength:0,
                //每次上拉刷新增加的量
                increase:4,
                more:true,
            }
        },
        created(){ //data数据初始化后
            this.getGoodsList();
            // window.addEventListener('scroll',()=>{
            //     var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            //     console.log(scrollTop);
            //
            //     if(scrollTop<327){
            //
            //     }else{
            //         this.more=false;
            //         this.nowLength+=6;
            //         this.getGoodsList();
            //     }
            // })
        },
        mounted(){//组件中dom结构渲染好并放到页面中后-----用于操作DOM元素
            // mui('.mui-scroll-wrapper').scroll({
            //     deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
            // });
            // mui.init({
            //     pullRefresh : {
            //         gestureConfig:{
            //             doubletap:true
            //         },
            //         subpages:[{
            //             url:'http://localhost:3000/#/home/goodslist.html',
            //             id:'http://localhost:3000/#/home/goodslist.html',
            //             styles:{
            //                 top: '45px',
            //                 bottom: '0px',
            //             }
            //         }],
            //         container:"#pullrefresh",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
            //         up:{
            //             contentrefresh: '正在加载...',
            //             contentnomore:'没有更多数据了',
            //             auto:true,
            //             // height: '100px',//可选,默认50px.下拉刷新控件的高度,
            //             // range:'100px', //可选 默认100px,控件可下拉拖拽的范围
            //             callback:pullupRefresh.bind(this),
            //         }}});
            // function pullupRefresh() {
            //     setTimeout(() => {
            //         this.nowLength += 6;
            //         this.getGoodsList();
            //         if (this.more === false) {
            //             mui('#pullrefresh').pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了。
            //         } else {
            //             mui('#pullrefresh').pullRefresh().endPullupToRefresh(false); //参数为true代表没有更多数据了。
            //         }
            //     }, 500);
            // }
        },
        methods: {
            getGoodsList() {
                this.$http.get('/api/goodslist').then(res => {
                    let length = (this.nowLength + this.increase) > res.body.data.length ? res.body.data.length : (this.nowLength + this.increase);
                    this.goodslist = this.goodslist.concat(res.body.data.slice(this.nowLength, length));
                    if(length===res.body.data.length){
                        this.more=false;
                    }
                    this.nowLength += this.increase;
                })
            },
            goDetail(id){
                //编程式导航
                this.$router.push("/home/goodsinfo/"+id);
            },
            //vue-scroller下拉刷新
            refresh() {
                console.log("refresh");
            },
            //vue-scroller上拉刷新---每次进入页面自动刷新一次
            infinite(done) {
                if (this.more === false) {//到底了
                    // this.$refs.my_scroller.finishInfinite(true)
                    done(true)
                } else {
                    setTimeout(()=>{
                        //执行下一次更新操作
                        // this.$refs.my_scroller.finishInfinite(false)
                        this.getGoodsList();
                        done();
                        // console.log(this.nowLength )

                    },1500);
                }
            },
        },
//        定义本地过滤器控制标题长度在两行以内，超过两行显示...
            filters: {
            },
        }
</script>

<style lang="scss" scoped>
    //解决滑动时Unable to preventDefault inside passive event listener due to target being treated as passive警告
    * {
        touch-action:pan-y;
    }

.goods-list{
    .bottom{
        width: 100%;
        text-align: center;
        color: #ccc;
        font-size: 14px;
    }
    display:flex;
    flex-wrap: wrap;
    padding: 40px 7px 0 7px;
    justify-content: space-between;
    .goods-item{
        width: 49%;
        border: 1px solid #ccc;
        box-shadow:0 0 8px #ccc;
        margin: 4px 0;
        padding: 2px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 280px;
        /*max-height: 400px;*/
        img{
            width: 100%;
            height: 200px;
        }
        .title{//设置商品列表标题最多两行超出显示...
            font-size: 14px;
            height: 28px;
            overflow : hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;      /* 可以显示的行数*/
            text-overflow: ellipsis;       /*超出部分用...表示*/
            -webkit-box-orient: vertical;
        }

        .info{
            background-color: #eee;
            p{
                margin: 0;
                padding: 5px;
            }
            .price{
                .now{
                    color: red;
                    font-size: 16px;
                    font-weight: bold;
                }
                .old{
                    text-decoration:line-through;
                    font-size: 12px;
                    margin-left: 10px;
                }
            }
            .sell{
                display:flex;
                justify-content: space-between;
                font-size: 13px;
            }
        }
    }
}
</style>